import { lazy, Suspense } from "react";
import { createBrowserRouter } from "react-router-dom";

const Login = lazy(() => import("@/page/Login"));
const About = lazy(() => import("@/page/About"));
const Home = lazy(() => import("@/page/Home"));
const Layout = lazy(() => import("@/page/Layout"));
const News = lazy(() => import("@/page/News"));
const NotFount = lazy(() => import("@/components/NotFount"));
const System = lazy(() => import("@/page/System"));
const User = lazy(() => import("@/page/User"));
const Menu = lazy(() => import("@/page/Menu"));
const Register = lazy(() => import("@/page/Register"));
const Rights = lazy(() => import("@/page/Rights"));
const Personal = lazy(() => import("@/page/Personal"));

const router = createBrowserRouter([
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/register",
    element: <Register />,
  },
  {
    path: "/",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <Layout />
      </Suspense>
    ),
    children: [
      {
        index: true,
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        ),
      },
      {
        path: "news",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <News />
          </Suspense>
        ),
      },
      {
        path: "about",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <About />
          </Suspense>
        ),
      },
      {
        path: "system",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <System />
          </Suspense>
        ),
        children: [
          {
            path: "user",
            element: (
              <Suspense fallback={<div>Loading...</div>}>
                <User />
              </Suspense>
            ),
          },
          {
            path: "menu",
            element: (
              <Suspense fallback={<div>Loading...</div>}>
                <Menu />
              </Suspense>
            ),
          },
          {
            path: "rights",
            element: (
              <Suspense fallback={<div>Loading...</div>}>
                <Rights />
              </Suspense>
            ),
          },
          {
            path: "personal",
            element: (
              <Suspense fallback={<div>Loading...</div>}>
                <Personal />
              </Suspense>
            ),
          },
        ],
      },
    ],
  },
  {
    path: "*",
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <NotFount />
      </Suspense>
    ),
  },
]);

export default router;
